import React from "react";
import ReactDOM from "react-dom/client";

/**
 * state 数据、条件渲染
 */
class MyComponent extends React.Component {
  // constructor() {
  //   super();
  //   this.state = {
  //     message: '你好'
  //   }
  // }

  // 定义在 class 组件中自身私有使用数据
  state = {
    message: "你好",
    visible: true,
  };

  handleClick = () => {
    console.log("in");
    // // 不能直接修改 state 状态数据
    // // 直接修改状态数据，不会响应式重新渲染视图
    // this.state.visible = false;

    // 要在数据修改后响应式渲染视图
    // 需要调用 setState() 方法来修改
    this.setState({
      visible: !this.state.visible,
    });
  };

  render() {
    return (
      <div>
        {this.state.message}{" "}
        <button onClick={this.handleClick}>切换显示/隐藏</button>
        {this.state.visible ? <div>是否可见元素的切换</div> : null}
      </div>
    );

    // if (this.state.visible) return <div>可见</div>;
    // else return null;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent title="千锋" />);
